import "./Skills.scss";
import Load from "@animation/Load"
import TrackVisibility from 'react-on-screen';

interface Skill {
  percent: number;
  name: string;
}

const Skills = memo(() => {
  const skills: Skill[] = [{
    percent: 100,
    name: "Web Devll"
  }, {
    percent: 70,
    name: "Web Devll2"
  }, {
    percent: 50,
    name: "Web Devll3"
  }]
  return (
    <section className="skills-com" id="skills">
      <div className="show-box">
        <p className="title">Skills</p>
        {/* <div className="skill-box"> */}
        {/* {
            skills.map((v, index) => (
              <div className="skill-target" key={index}>
                <Load percent={v.percent} name={v.name} startAnimat />
              </div>))
          } */}
        <TrackVisibility className="skill-box" once>
          {({ isVisible }) => skills.map((v, index) => (
            <div className="skill-target" key={index}>
              <Load percent={v.percent} name={v.name} startAnimat={isVisible} />
            </div>
          ))}
        </TrackVisibility>
        {/* </div> */}
      </div>
      <div className="background-image-left">
        <img src="/src/assets/img/color-sharp.png" alt="bg load error" />
      </div>
    </section>
  )
})

export default Skills
